<!--
 * @Author: Jackie
 * @Date: 2021-01-03 11:50:09
 * @LastEditors: Jackie
 * @LastEditTime: 2021-01-07 19:11:26
 * @Description: 年度数量
 * @FilePath: \temp-project\src\components\Annual.vue
-->
<template>
    <div class="Annual">
        <div class="AnnualSum">
          <div class="AnnualSumTitle">科技项目年度数量</div>
          <!-- 使用SVG仿制环形图 -->
          <div class="AnnualSumPie">
            <svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" class="svgpie">
              <defs>
                  <linearGradient id="blue_green" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" style="stop-color:#27bf52;stop-opacity:1"></stop>
                      <stop offset="100%" style="stop-color:#057089;stop-opacity:1"></stop>
                  </linearGradient>
              </defs>
              <circle cx="40"  cy="40" r= "25" fill="black"></circle>
              <circle class="progress" r="23.5" cy="40" cx="40" 
              stroke-width="3" stroke-linejoin="round" stroke-linecap="round" fill="none" 
              stroke-dashoffset="0px"   transform="rotate(-90, 40, 40)"
              />   
              <text   x="50%" y="50%" class="txt" id="txt" dy=".3em"  >757</text>
            </svg>  
          </div>
        </div>
        <div class="AnnualDetail">
            <table>
                  <tr>
                      <th v-for='(item,ind) in columnList' :key="ind">{{item}}</th>
                  </tr>
                  <tr v-for='(item,index) in inforList' :key="index" class="AnnualDetailBar">
                      <td  v-for='(it,ind) in columnList' :key="ind">{{item[it]}}</td>
                  </tr>
            </table>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
          columnList: ['板块', '数量','','预算'],
          inforList: [
                  {'板块': '集团内部', '数量': 57,   '':100000, '预算': 29337},
                  {'板块': '电力板块', '数量': 329,  '':100000,'预算': 191925},
                  {'板块': '煤炭板块', '数量': 39, '':100000,'预算': 24634},
                  {'板块': '天然气板块', '数量': 68, '':100000,'预算': 14912},
                  {'板块': '新能源板块', '数量': 37, '':100000,'预算': 12092},
                  {'板块': '科服板块', '数量': 74, '':100000,'预算': 35651},
                  {'板块': '西北分公司', '数量': 27, '':100000,'预算': 15067},
                  {'板块': '金融板块', '数量': 31, '':100000,'预算': 549},
                  {'板块': '石油公司', '数量': 46, '':100000,'预算': 16478},
                  {'板块': '浙能研究院', '数量': 28, '':100000,'预算': 9769},
                  {'板块': '长广集团', '数量': 6, '':100000,'预算': 207},
                  {'板块': '财务公司', '数量': 12, '':100000,'预算': 1707},
                  {'板块': '智能产业园', '数量': 3, '':100000,'预算': 45},
                ],  
        }
    },
    mounted(){
      this.AnnualDetail()//table里插入div，仿制条形图   
      this.pie()   //使用SVG仿制环形图
      window.addEventListener("resize", () => this.svgpie());
  },
  methods:{
    AnnualDetail(){
      //table里插入div，仿制条形图
      let _this = this; 
      const maxNum=Math.max.apply(Math, _this.inforList.map(function(o) {return o.数量}))
      const AnnualDetailBar=document.querySelectorAll('.AnnualDetailBar')
      AnnualDetailBar.forEach((item,index)=> {
        const value=_this.inforList[index]['数量']/3
        const tmp=item.childNodes[2]
        tmp.innerHTML=`
        <div style="width:${value/80}rem;
        height:10px; 
        background:linear-gradient(to right, #cf24c1 ,#4f80ff); 
        background: -webkit-linear-gradient(left, #cf24c1 , #4f80ff); 
        background: -o-linear-gradient(right, #cf24c1, #4f80ff); 
        background: -moz-linear-gradient(right, #cf24c1, #4f80ff);
        border-radius:4px"
        >
        </div>
        `
      });
    },
    pie(){
      //svg仿制环形图，添加"进度属性"
      const progress = document.querySelector(".progress");
      const r=progress.r.baseVal.value//获取圆形的半径
      const num=66//进度值
      const perimeter=Math.PI*2*r//计算周长
      progress.style.strokeDasharray = `${Math.round(num*perimeter/100,2)}, ${Math.round(perimeter,2)}`;//计算虚线
      },
    svgpie(){
      const tmp=document.querySelector(".AnnualSumPie");
      const w=tmp.clientWidth;
      const h=tmp.clientHeight;
      const iconbase=document.querySelector(".svgpie");
      iconbase.style.cssText=`width:${w}; height:${h};`
    }
  }

}
</script>

<style lang="less" scoped>

.Annual{  
    width: 4.5rem; // 360px;
    height: 7.825rem;//626px
    border-radius: .125rem;//10px;
    background-color: var(--bgc--);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    // margin-bottom: 48px;
    >.AnnualSum{//年度数量
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4rem;//320px
      height: 1.125rem;//90px
      color: var(--textColor--);
      border-bottom: 2px solid black;
      .AnnualSumTitle{
        font-family: "NotoSansHans-Light";
        font-weight: 300;
        font-size: .2625rem;//21px;
        padding: 0 .25rem;//0 20px
      }
      .AnnualSumPie{
        width: 1rem;//80px;
        height:1rem;//80px;
      }
    }
    >.AnnualDetail{
      width: 4rem;//320px
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin: .25rem 0 .5rem 0;//20px 0 40px 0
      }
      table {
        width: 100%; height: 100%;
        text-align: start;
        th{
          text-align: start;
          color: var(--textColor--);
          font-family: "NotoSansHans-Light";
          font-weight: 300;
          font-size: .225rem;//18px;
        }
        td{
          font-size: .2rem; //16px;
        }
      }
    }
.progress{stroke: url(#blue_green);}
 text { 
   text-anchor: middle; 
   pointer-events: auto; 
   fill: #fff;
   font-size: .21875rem;//17.5px; 
   font-family: 'Franklin Gothic Medium';
   font-weight: lighter;
   } 
</style>
